import React, { Component } from 'react'
import './App.css'
import Title from './Components/Title'
import Header from './Components/Header'
import Main from './Components/Main'
import Footer from './Components/Footer'

export default class App extends Component {
    state = {
        finishedTasks: 0,
        allTasks: 0,
        allFlag: false,
        taskList: [
            {id: "001", task: "敲代码", haveDone: false},
            {id: "002", task: "玩游戏", haveDone: false},
            {id: "003", task: "睡觉", haveDone: true},
            {id: "004", task: "吃饭", haveDone: false},
            {id: "005", task: "敲代码", haveDone: false},
            {id: "006", task: "逛街", haveDone: false},
            {id: "007", task: "钓鱼", haveDone: false},
            {id: "008", task: "打牌", haveDone: false},
            {id: "009", task: "看电影", haveDone: true},
            {id: "010", task: "敲代码", haveDone: true}
        ],
        disabled: false
    }

    // 初始化数据
    UNSAFE_componentWillMount() {
        this.getTaskListLength()
        this.getFinishedTasks()
    }

    // 接收Header组件传递的任务
    getToDoTask = (props) => {
        let {taskList} = this.state
        let newTaskList = [props, ...taskList]
        this.setState({taskList: newTaskList})
        this.getTaskListLength(newTaskList)
        this.getFinishedTasks()
    }

    changeDisable = () => {
        if (this.state.allTasks === 0) {
            this.setState({disabled: true})
        }
    }

    // 计算所有的任务
    getTaskListLength = (list = this.state.taskList) => {
        this.setState({allTasks: list.length})
    }

    // 计算已完成的任务
    getFinishedTasks = () => {
        // let num = this.state.taskList.reduce((pre, crr) => {
        //     return pre + (crr.haveDone ? 1 : 0 )
        // }, 0)
        // this.setState({finishedTasks: num})
        let finishedTasks = 0
        this.state.taskList.forEach(item => {
            if (item.haveDone) {
                finishedTasks++
            }
        })
        this.setState({finishedTasks: finishedTasks})
        if (finishedTasks === this.state.taskList.length && this.state.taskList.length !== 0) {
            this.setState({allFlag: true})
        }else {
            this.setState({allFlag: false})
        }
    }

    // 通过id删除任务
    removeTaskByID = (task) => {
        let {taskList} = this.state
        for(let index = taskList.length - 1; index >= 0; index--) {
            if(taskList[index] && taskList[index].id === task) {
                if (window.confirm('您确定要删除吗？')) {
                    taskList.splice(index, 1)
                    this.setState({taskList: taskList})
                    this.getTaskListLength()
                    this.getFinishedTasks()
                    this.changeDisable()
                }
            }
        } 
    }

    // 清除已完成
    removeHaveDone = () => {
        let {taskList,allFlag} = this.state
        for(let index = taskList.length-1; index >=0; index--) {
            if (taskList[index] && taskList[index].haveDone === true) {
                taskList.splice(index, 1)
                this.setState({taskList: taskList, allFlag: allFlag})
                this.getTaskListLength()
                this.getFinishedTasks()
                this.changeDisable()
            }
        }
    }

    // 设置状态
    setHaveDone = (id) => {
        let {taskList} = this.state
        let newTaskList = taskList 
        for(let index = newTaskList.length - 1; index >= 0; index--) {
            if(newTaskList[index] && newTaskList[index].id === id) {
                newTaskList[index].haveDone = !taskList[index].haveDone
                this.setState({taskList: newTaskList})
                this.getFinishedTasks()
            }
        } 
    }

    // 设置所有的状态
    setAllHaveDone = () => {
        let {taskList, allFlag} = this.state
        let newTaskList = taskList
        for(let index = newTaskList.length-1; index >=0; index--) {
            if (!allFlag && newTaskList.length !== 0) {
                if (newTaskList[index] && newTaskList[index].haveDone !== true) {
                    newTaskList[index].haveDone = !allFlag
                    this.setState({taskList: newTaskList})
                    this.getFinishedTasks()
                }
            }else {
                this.setState({allFlag: !allFlag})
                newTaskList.forEach((item) => {
                    item.haveDone = !allFlag
                })
                this.setState({taskList: newTaskList})
                this.getFinishedTasks()
            }
        }
    }

    render() {
        return (
            <div className="appBox">
                <Title/>
                <Header getData={this}/>
                <Main monitor={this}/>
                <Footer allFlag={this.state.allFlag} disabled={this.state.disabled} finishedTasks={this.state.finishedTasks} allTasks={this.state.allTasks} setAllHaveDone={this.setAllHaveDone} removeHaveDone={this.removeHaveDone}/>
            </div>
        )
    }
}